<template>
  <div class="content_box">
    <div class="lanmu_box">
      <div class="box">
        <van-tabs v-model="active" @change="tabChange">
          <van-tab :title="item.name" v-for="(item,index) in lanmu" :key="index"></van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="list" v-if="list.length">
      <div class="item" v-for="(item, index) in list" :key="index">
        <p class="label">免费打</p>
        <div class="it">
          <div class="left">
            <p class="name">{{ item.duration }}<span>分钟</span></p>
            <p class="text">{{item.cardName}}</p>
          </div>
          <div class="right">
            <!-- 待使用 -->
            <div class="anniu" v-if="item.status === 0">
              <p @click="toShiYong">立即使用</p>
              <p @click="toZengSong(item.id)">转赠好友</p>
            </div>
            <!-- 已使用 -->
            <div class="anniu on" v-if="item.status === 1">
              <p>已经使用</p>
            </div>
            <!-- 已转增 -->
            <div class="anniu on" v-if="item.status === 2">
              <p>已转赠好友</p>
            </div>
            <!-- 过期 -->
            <div class="anniu on" v-if="item.status === 3">
              <p>已过期</p>
            </div>
          </div>
        </div>
        <p class="time">有效期至 {{ item.expireTime}}</p>
      </div>
    </div>
    <div class="no_data" v-else>
     <img mode="widthFix" src="/static/images/components/no_order.png" alt="" />
    </div>
  </div>
</template>

<script>
import { 
  getToken,
  getUserPhone
} from "@/utils/auth";
import { 
getUserExtraTimeCardList
} from "@/api/index";
import { mapState } from 'vuex'
import { Debounce } from "@/utils/index";
export default {
 computed: {
   ...mapState(['user']),
 },
 data() {
   return {
     list:[],
     lanmu:[
       {name:'台球',query:0},
       {name:'麻将',query:1},
     ],
     cardIlk:0
   };
 },

 methods: {

  // 订单状态切换
  tabChange(e){
     //console.log(e)
      const index = e.mp.detail.index
     this.cardIlk = this.lanmu[index].query
     this.getList()
   },

   // 格式化时间
   formatDateTime(ts, sepDate = '-', sepTime = ':') {
      if (!ts) return '';
      const date = new Date(Number(ts));
      const Y = date.getFullYear();
      const M = String(date.getMonth() + 1).padStart(2, '0');
      const D = String(date.getDate()).padStart(2, '0');
      const h = String(date.getHours()).padStart(2, '0');
      const m = String(date.getMinutes()).padStart(2, '0');
      return `${Y}${sepDate}${M}${sepDate}${D}`;
    },
  getList(){
    getUserExtraTimeCardList({cardIlk:this.cardIlk}).then(res=>{
      if(res.statusCode=='00000'){
        res.data.map(item=>{
          item.expireTime = this.formatDateTime(item.expireTime)
        })
        this.list = res.data
      }
    })
  },
    // 跳转转增加时卡
    toShiYong(id){
          if(!getUserPhone()){
            wx.navigateTo({
              url: '/pages/authorization/main',
            });
            return
          }
          wx.switchTab({
            url:'/pages/order/main'
        })
    },
  // 跳转转增加时卡
    toZengSong(id){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/giveCard/main?userExtraTimeCardId=${id}`,
      });
    }
 },
 onShow(){
  this.getList()
 },
 onLoad(options) {
 },

 onUnload(){
 },
};
</script>

<style lang="scss" scoped>
.lanmu_box{
   height: 88rpx;
   margin-bottom:24rpx;
   .box{
     position: fixed;
     top:0;
     width: 100%;
     z-index: 100;
     background: #fff;
   }
   /deep/ .van-tab{
     color:#666666;
     font-size:30rpx;
   }
   /deep/ .van-tabs__line{
     background: #00C200;
   }
   /deep/ .van-tab--active{
     color:#00C200;
     font-weight: bold;
   }
 }
.content_box {
 min-height: 100vh;
 background: #F5F5F5;
 padding-bottom:30rpx;
 .list {
   padding: 30rpx 30rpx 0;
   .item {
     background: #FFFFFF;
     border-radius: 16rpx;
     padding: 30rpx;
     margin-bottom: 20rpx;
     position: relative;
     .label {
       font-size: 28rpx;
       color: #fff;
       font-weight: bold;
       position: absolute;
       top: 30rpx;
       left:0rpx;
       width: 120rpx;
       height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #FF4622;
      border-radius: 0 16rpx 0 16rpx;
      transform: translateY(-30rpx);
     }
     .it {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-top: 30rpx;
       .left {
         .name {
           font-size: 62rpx;
           color: #333333;
           font-weight: bold;
           margin-bottom: 10rpx;
           span{
            font-size: 28rpx;
            padding-left: 4px;
           }
         }
         .text {
           font-size: 28rpx;
           color: #999999;
         }
       }
       .right {
         font-size: 28rpx;
         .anniu {
          p {
            margin: 0;
            
            text-align: center;
            border: 1rpx solid #FF4622;
            color: #FF4622;
            // background-color:  rgba(0, 194, 0, 1);
            border-radius: 12rpx;
            min-width: 140rpx;
            height: 50rpx;
            line-height: 50rpx;
            cursor: pointer;
            &:nth-child(2) {
              margin-top: 20rpx;
              background-color:  #FF4622;
              color: #fff;
            }
          }
          &.on {
            p {
              border-color: #999999;
              color: #999999;
              cursor: not-allowed;
            }
          }
         }
       }
     }
     .time {
      border-top: 1px dashed #E5E5E5;
      padding-top: 20rpx;
       font-size: 24rpx;
       color: #999999;
       margin-top: 20rpx;
     }
   }
 }
 .no_data{
   text-align: center;
   font-size:28rpx;
   color:#333;
   padding-top:150rpx;
   .text{
     font-weight: bold;
     color:#999;
   }
   img{
     width: 248rpx;
     margin-bottom:10rpx;
   }
   .button{
     width: 240rpx;
     height: 70rpx;
     line-height: 70rpx;
      background: #02b4ae;
     // background: #35c982;
     border-radius: 120rpx;
     text-align: center;
     font-size: 30rpx;
     color: #fff;
     margin-top: 30rpx;
     margin: 30rpx auto 0 auto;
   }
 }
}
</style>